<template>
  <view class="home">
    <navBar :languageSwitch="languageSwitch" @submitLanguage="submitLanguage"></navBar>
    <notice></notice>
    <view class="home-content" v-for="(item,index) in countAllTotal" :key="index">
      <view class="frame-msg-top">
          <view class="frame-msg-top-top">
<!--           如果current_level等于1，如果不是就显示current_level的值 -->
            <view v-if="item.current_level === 1">{{currentPeriod}}</view>
            <view v-else>{{only}}{{item.level}}{{stage}}</view>
          </view>
          <view class="frame-msg-top-bottom">
<!--            三元判断item.last_amount == 0就不显示-->
            <view v-if="item.last_amount === 0 "></view>
            <view v-else>{{CountdownOfShares}}:{{item.last_amount}}</view>
          </view>
      </view>
      <view class="frame-msg-bottom">
          <view>{{ item.total_num}}&nbsp;USDT</view>
          <view class="name-frame-msg-bottom" @tap="buy" v-if="item.current_level === 1">
            {{Buy}}
          </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import navBar from '../../component/navBar.vue';
import notice from './notice/notice.vue'
import {ref,reactive} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {getCurrentIssue , getAllIssue} from "../../api/home";
let languageSwitch = ref(false);


let params = reactive({})
let query = reactive({})
//文档语言
let currentPeriod = ref('當期');
let only = ref('第');
let stage = ref('期');
let CountdownOfShares = ref('份額倒數計時');
let Buy = ref('購買');


//数量
let countTotal = ref();
let countAllTotal = ref([]);
const submitLanguage = (row)=>{
  uni.setStorageSync('LANG_KEY',row)
  getLanguages();
}
const closeLanguage= ()=>{}
const buy = ()=>{
    getCurrentIssue().then(res=>{
      if(res.data.code === 200){
        query = res.data.data;
        params = Object.assign({},query)
        if(params){
          uni.navigateTo({
            url: `/pages/index/goods/goods?data=`+JSON.stringify(params)
          })
        }
      }
    })



}



const getAllIssueList = ()=>{
  getAllIssue().then(res=>{
    if(res.data.code === 200){
      countAllTotal.value = res.data.data
    }
  })
}

onLoad(()=>{
  // getCurrentIssueList()
  getAllIssueList()
})

onShow(()=>{
  getLanguages();
})

const getLanguages = ()=>{
  const lang = uni.getStorageSync('LANG_KEY')
  if(lang === '中文'){
    currentPeriod.value='當期';
    CountdownOfShares.value='份額倒數計時'
    Buy.value='購買';
    only.value='第';
    stage.value='期';
  }
  if(lang === 'Eng'){
    currentPeriod.value='Current Period';
    CountdownOfShares.value='Shares Countdown'
    Buy.value='Buy'
    only.value='The';
    stage.value='stage'

  }
  if (lang === '日本語'){
    currentPeriod.value='当期';
    CountdownOfShares.value='シェアカウントダウン'
    Buy.value='購入する'
    only.value='第';
    stage.value='期'
  }
  if (lang === '한국어'){
    currentPeriod.value='당기';
    CountdownOfShares.value='점유율 카운트다운'
    Buy.value='구매'
    only.value='제';
    stage.value='기간'

  }
}




</script>

<style scoped>
.home{
  background-color: #EBEBEB;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  min-height: 100vh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  z-index: 1;
}
.frame-msg-top{
  background-image: url('../../static/jiaoyi/shouye/7.png');
  background-repeat: no-repeat; /* 背景图片是否重复 */
  background-position: center; /* 背景图片的位置 */
  background-size: cover; /* 背景图片的尺寸，cover表示覆盖整个元素，不留空白 */
  width: 100%; /* 或其他尺寸 */
  height: auto; /* 或其他尺寸 */
  color: #FFFFFF;
  text-align: center;
  box-sizing: border-box;
  //scale: 0.9;
  border-radius: 10px 10px 0px 0px;
  margin-left: auto;
  margin-right: auto;
}
.frame-msg-bottom{
  background-image: url('../../static/jiaoyi/shouye/10.png');
  background-repeat: no-repeat; /* 背景图片是否重复 */
  background-position: center; /* 背景图片的位置 */
  background-size: cover; /* 背景图片的尺寸，cover表示覆盖整个元素，不留空白 */
  width: 100%; /* 或其他尺寸 */
  height: auto; /* 或其他尺寸 */
  text-align: center;
  box-sizing: border-box;
  //scale: 0.901;
  border-radius: 0px 0px 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;     /* 垂直居中 */
  padding: 10px;
  box-sizing: border-box;
}
.home-content{
  //margin-top: 0.5rem;
  scale: 0.95;
}
.frame-msg-top-top{
  font-size: 20px;

  padding-top: 3.5rem;
  box-sizing: border-box;
}
.frame-msg-top-bottom{
  font-size:16px;
  padding-top: 2rem;
  box-sizing: border-box;
  padding-bottom: 10px;

}
.name-frame-msg-bottom{
  border: 1px solid #7F96BA;
  padding: 0.3rem 1rem;
  border-radius: 5px;

}
</style>
